<template>
  <div id="app">
    <img src="@/assets/luopan.png" width="100%"  :style="`transform:rotate(${18*deg - 90}deg)`" alt="">
    <h3>当前：{{current}}</h3>
    <el-slider v-model="deg" @change='v=>changeH(v)' :min="1" :max="9" :step='1' :format-tooltip="v=>formatText(v)" />
    <br>
    <br>
    <br>
    <br>
    <br>
    <el-button round type="primary" @click="deg= 5;changeH(5)">回正</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      deg: 5,
      texts:['','左60度','左40度','左30度','左10度',
      '正前方',
        '右10度','右30度','右40度','右60度'],
      current: '正前方',
      rotatePath: ['','l_60','l_40','l_30','l_10',
      'center'
      ,'r_10','r_30','r_40','r_60']
    }
  },
  methods:{
    changeH(v){
      console.log('changeH:', v);
      this.setRotate(v)
    },
    formatText(v){
      // console.log(v);
      this.current = this.texts[v];
      return this.texts[v]
    },
    setRotate(n){
      this.$axios.get('/',{
        params: {
          deg: this.rotatePath[n]
        }
      })
      .then(r=>{
        console.log(r);

      })
    }
  },
  watch:{
  }
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 20px;
}
img{
  transition: 0.3s!important;
  transform:rotate(0deg);
}
</style>
